<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="Cache-Control" content="no-siteapp">
<!--	<link rel="icon" th:href="@{/images/bookmark/192.png}" href="/static/images/bookmark/192.png" sizes="192x192" />-->
<!--	<link rel="apple-touch-icon-precomposed" th:href="@{/images/bookmark/300.png}" href="/static/images/bookmark/300.png" />-->
<!--	<meta name="msapplication-TileImage" content="icon/300.png" />-->
<!--	<link th:href="@{/images/bookmark/32.png}" rel="shortcut icon" href="/static/images/bookmark/32.png" />-->
	<link rel="stylesheet" th:href="@{/css/bookmark/iconfont.css}" href="/static/css/bookmark/iconfont.css">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="full-screen" content="yes">
	<!--UC强制全屏-->
	<meta name="browsermode" content="application">
	<!--UC应用模式-->
	<meta name="x5-fullscreen" content="true">
	<!--QQ强制全屏-->
	<meta name="x5-page-mode" content="app">
	<!--QQ应用模式-->
	<title>个人书签</title>
	<link th:href="@{/css/bookmark/style.css}" href="/static/css/bookmark/style.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
	<div id="menu"><i></i></div>
	<div class="list closed" id="list">
		<ul th:fragment="linkContent">
			<li class="title"><i class="fa fa-fire"></i> 我的书签</li>
			<li th:each="link : ${links}">
				<a rel="nofollow" th:href="@{${link.url}}" target="_blank" style="padding-top: 0">
<!--					<i class="fab fa-dribbble" style="color: orangered;"></i>-->
					<img th:src="@{${link.icon}}" style="width: 16px; height: 16px; border-radius:50%; margin-left: 5px; margin-top: 8px">
					[[${link.title}]]
				</a>
			</li>
		</ul>
	</div>
	<div id="tp-weather-widget" class="mywth"></div>
	<div id="content">
		<div class="con">
			<div class="shlogo"></div>
			<div class="sou">
				<form action="https://www.baidu.com/s?ie=utf-8" method="get" target="_blank">
					<input class="wd" type="text" placeholder="请输入搜索内容" name="wd" x-webkit-speech lang="zh-CN">
					<button><i class="fab fa-sistrix"></i></button>
				</form>
				<ul>
					<li data-s="baidu" target="_blank"><i style="background-image: url(/images/bookmark/baidu.svg);"></i>百度一下</li>
					<li data-s="google" target="_blank"><i style="background-image: url(/images/bookmark/g.svg);"></i>Google</li>
				</ul>
			</div>
		</div>
		<script>
			//请求收藏链接数据
			function loadStarLink(){
				var token = localStorage.getItem('token');
				if(token == null){
					return;
				}
				$.ajax({
					type: 'get',
					headers: {
						authorization: token
					},
					url: '[[@{/user/bookmark/star}]]',
					success: function (data){
						$("#list").html(data);
					}
				})
			}
			$(function () {
				//判断窗口大小，添加输入框自动完成
				var wid = $("body").width();
				if (wid < 640) {
					$(".wd").attr('autocomplete', 'off');
				}

				function sub() {
					var nm = $(".wd").attr('name');
					if (nm == "q") {
						$("form").attr('action', 'https://www.google.com/search?q=zh');
						$("form").submit();
					} else {
						$("form").attr('action', 'https://www.baidu.com/s?ie=utf-8');
						$("form").submit();
					}

				}
				//按钮
				$(".sou li").click(function () {
					var dt = $(this).attr('data-s');
					if (dt == "google") {
						$(".wd").attr('name', 'q');
						sub();
					} else {
						$(".wd").attr('name', 'wd');
						sub();
					}

				});
				//菜单点击
				$("#menu").click(function (event) {
					$(this).toggleClass('on');
					$(".list").toggleClass('closed');
					$("#tp-weather-widget").toggleClass('hidden');
				});
				$("#content").click(function (event) {
					$(".on").removeClass('on');
					$(".list").addClass('closed');
					$("#tp-weather-widget").removeClass('hidden');
				});
				//请求收藏链接数据
				loadStarLink();
			});
		</script>
		<!-- 尾部 -->
		<div class="foot">
			<p id="hitokoto">获取中...</p>
		</div>
	</div>
	<!-- 新 API 方法， 十分简洁 -->
	<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
</body>

</html>